<template>
	<view class="swap">
		<u-navbar back-icon-color="#FFFFFF" title-color="#FFFFFF" :border-bottom="false"
			:background="{background:'linear-gradient(to right, #0A0A25 30%,#220B4E 60%, #083842 80%)'}"
			:title="i18n.wallet">
			<template #right>
				<view class="mg-r-30" @click="pageto('/pages/wallet/Withdrawal')">
					{{i18n.Withdrawal}}
				</view>
			</template>
		</u-navbar>

		<view class="he4"></view>

		<view class="info">
			<view class="to">
				<view class="zindex exchange-btn">
					<image src="@/static/add/swap-BNB.png" style="width: 40rpx;height: 40rpx;"></image>
					<view class="mg-l-10 mg-r-10">KR</view>
				</view>
				<view class="zindex fsb mg-t-50">
					<view class="f48 weight">5.68</view>
					<view class="">≈158.276</view>
				</view>
			</view>
			<view class="from">
				<view class="zindex exchange-btn">
					<image src="@/static/add/swap-BNB.png" style="width: 40rpx;height: 40rpx;"></image>
					<view class="mg-l-10 mg-r-10">LP</view>
				</view>
				<view class="zindex fsb mg-t-50">
					<view class="f48 weight">5.68</view>
					<view class="">≈158.276</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	var that
	import {
		_updataTabBar,
		pageto,
		fetch
	} from "../../common/js/sysfun.js"
	import {
		mapGetters,
		mapMutations
	} from 'vuex'

	export default {
		data() {
			return {
				dataList: []
			}
		},
		onLoad() {

		},
		onShow() {

		},
		computed: {
			i18n() {
				return this.$t('message');
			},
			...mapGetters([
				'getRequestUrl',
				'getLangType',
				'getTextArr',
				'getLoginInfo'
			])
		},
		methods: {
			...mapMutations([
				'setGgsxq',
				'setLoginInfo',
				'setLogin',
				'setLoginTime',
				'setLangType',
				'setAreas'
			]),

			// 获取首页数据
			getData() {
				that.$postAjax('api/Index/index', '', function(res) {
					console.log(res, 'home');
				})
			},

			pageto(url, pp) {
				console.log(url)
				pageto(url, pp);
			},
		},
		onReachBottom() {

		},
	}
</script>

<style lang="scss" scoped>
	.swap {
		color: #FFFFFF;
		height: 100vh;
		background-image: url(@/static/add/invite-bg.png);
		background-repeat: no-repeat;
		background-size: 100% 100%;

		.info {
			margin: 0 20rpx;
			padding: 40rpx 40rpx 70rpx;
			border-radius: 40rpx;
			background-color: rgba(81, 95, 140, .5);
			box-shadow: inset -4rpx -4rpx 6rpx 2rpx rgba(81, 95, 140, .5);

			uni-image {
				z-index: 2;
			}

			.to,
			.from {
				position: relative;
				overflow: hidden;
				padding: 40rpx;
				border-radius: 40rpx;
				background-color: #010A38;
			}

			.zindex {
				position: relative;
				z-index: 2;
			}

			.exchange-btn {
				display: flex;
				align-items: center;
				width: 190rpx;
				padding: 14rpx 20rpx;
				border-radius: 30rpx;
				background-color: rgba(107, 78, 115, .4);
			}

			.to {}

			.from {
				margin-top: 40rpx;
			}

			.to::before {
				content: "";
				position: absolute;
				top: 0;
				left: 0;
				width: 110rpx;
				height: 100%;
				background: linear-gradient(to top right, #B22CD8 0%, #2E1261 30%, #010A38 100%);
			}

			.to::after {
				content: "";
				position: absolute;
				left: 8rpx;
				bottom: 8rpx;
				width: 102rpx;
				height: 100%;
				border-radius: 0 0 0 30rpx;
				background: linear-gradient(to top right, #4E3278 0%, #2E1261 10%, #010A38 60%);
				z-index: 1;
			}

			.from::before {
				content: "";
				position: absolute;
				top: 0;
				right: 0;
				width: 110rpx;
				height: 100%;
				background: linear-gradient(to top left, #11E8CE 0%, #032449 30%, #010A38 54%);
			}

			.from::after {
				content: "";
				position: absolute;
				right: 8rpx;
				bottom: 8rpx;
				width: 102rpx;
				height: 100%;
				border-radius: 0 0 30rpx 0;
				background: linear-gradient(to top left, #053E5B 0%, #021B44 30%, #010A38 54%);
				z-index: 1;
			}
		}
	}
</style>